<script setup lang="ts">
  import { ref, watch, nextTick } from 'vue';
  import { getBorrowDetail, editBrrow } from '@/api/archives';
  import { FormInstance, Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { transformDeptTreeSelect } from '@/utils/utils';
  import { useUserStore } from '@/store';
  import { getDeptSelect, replyUserMessage } from '@/api/syssetting';
  import { getAllUser } from '@/api/user';
  import { getFirstApproval } from '@/api/approve';

  const formRef = ref<FormInstance | null>(null);
  const props = defineProps({
    visible: Boolean,
    params: Object,
  });
  const { loading, setLoading } = useLoading();
  defineOptions({
    name: 'userAddSetting',
  });
  const userStore = useUserStore();

  const formData = ref({});
  const emit = defineEmits(['update:visible', 'refresh']);
  const showModel = ref(false);

  const handleSubmit = async () => {
    try {
      // 先验证表单基础校验
      if (!formRef.value?.checkForm()) {
        return;
      }

      // 所有校验通过后执行提交
      setLoading(true);
      const res = await replyUserMessage({
        msg_id: props?.params.id,
        ...formRef.value?.formModel,
      });

      Message.success(res.msg);
      emit('update:visible', false);
      emit('refresh');
    } catch (error) {
      // Message.error('提交失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  const sonformType = ref([
    {
      name: 'msg_reply',
      label: '回复内容',
      type: 'a-textarea',
      fieldProps: {
        span: 24,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
  ]);
</script>

<template>
  <a-modal
    title="回复消息"
    :visible="visible"
    @ok="handleSubmit"
    title-align="start"
    :ok-loading="loading"
    ok-text="回复"
    @cancel="
      () => {
        emit('update:visible', false);
      }
    "
  >
    <pro-form
      ref="formRef"
      hiddenBtn
      :form-json="sonformType"
      :form-data="formData"
    ></pro-form>
  </a-modal>
</template>

<style scoped lang="less">
  :deep(.arco-select-view-inner) {
    text-align: left !important;
  }
  .iscard {
    width: 360px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .cardBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cardItem {
    display: flex;
    align-items: center;
    color: #1d2129;
  }
</style>
